<template>
	<div class="">
		<!--<base-header></base-header>-->
		<!--<div class="brace-bg"></div>-->
		<loading v-if="isloading"></loading>
		<h2 class="brace-type-title text-center">请选择医生</h2>		
		<ul class="brace-type-ul">
			<li v-for="doctor in list" @click="nextStep(doctor.id,doctor.username)" class="brace-type-li">
				<img class="brace-type-img" :src="url + (doctor.avatar_path) + (doctor.avatar)" />
				<span class="brace-type-name">{{doctor.username}}</span>
			</li>
		</ul>
		<no-msg v-if="noMsg"></no-msg>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import NoMsg from "@/components/common/NoMsg"
	import Loading from "@/components/common/Loading"
	export default {
		name: 'DoctorList',
		components: {
			BaseHeader,
			NoMsg,
			Loading
		},
		data() {
			return {
				url: '',
				oss_url: '',
				list: [],
				bid: '',
				name: '',
				noMsg: false,
				isloading: true
			}
		},
		mounted() {
			this.bid = this.$route.query.bid;
			this.name = this.$route.query.type;
			this.getDoctor();
		},
		methods: {
			//获取医生列表
			getDoctor() {
				var self = this;
				var data = {

				};
				$.post(global.domain + global.API.doctor_list, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.list = msg.data;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						if(msg.data.length > 0) {
							self.noMsg = false;
						} else {
							self.noMsg = true;
						}
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//下一步
			nextStep(d_id, d_name) {
				var self = this;
				localStorage.setItem('did', d_id);
				localStorage.setItem('dname', d_name);
				console.log(this.name);
				if(this.name == 'new') {
					this.$router.push({
						name: 'NewBrace',
						params: {
							bid: self.bid
						}
					});
				} else {
					this.$router.push({
						name: 'SettingBrace',
						params: {
							bid: self.bid
						}
					});
				}

			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
	.brace-type-title {
		color: #000000;
	}
	
	.brace-type-li {
		margin-bottom: 20px;
		padding: 10px 0;
		border: 1px solid #eee;
		border-radius: 8px;
		background-color: #fff;
		color: #000;
	}
	
	.brace-type-img {
		width: 80px;
		height: 80px;
		margin-left: 35px;
		border-radius: 50%;
	}
</style>